<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-icon
        slot="icon"
        :component="require('@/assets/icon/User_Avatars.svg')"
      />
      <span class="name" />
    </div>

    <div slot="overlay" class="log-out-box" :class="['avatar-menu']">
      <div class="avatar-menu-in">
        <div class="d-flex ai-center mt-4">
          <a-icon
            :component="require('@/assets/icon/User_Avatar.svg')"
            style="font-size:64px"
          />
          <div class="ml-16">
            <div class="text-color-21252e">{{ userInfo.username }}</div>
            <div class="text-color-9ea5b2">{{ userInfo.roleName||'' }}</div>
          </div>
        </div>
        <div class="version-box text-color-21252e">
          V.1.0.1
        </div>
        <a-divider />
        <div class="log-out-text-box" @click="logout">
          <a-icon
            class="mr-4"
            :component="require('@/assets/icon/ShutDown.svg')"
            style="font-size:16px"
          />
          <span class="text-color-21252e fs-14 ml-4 log-out-btn">退出</span>
        </div>
      </div>

      <!-- <a-menu-item>
        <a-icon type="user" />
        <span>个人中心</span>
      </a-menu-item>
      <a-menu-item>
        <a-icon type="setting" />
        <span>设置</span>
      </a-menu-item>
      <a-menu-divider /> -->
      <!-- <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px;" type="poweroff" />
        <span>退出登录</span>
      </a-menu-item> -->
    </div>
  </a-dropdown>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'HeaderAvatar',
  computed: {
    ...mapGetters('user', ['userInfo'])
  },
  methods: {
    ...mapActions('user', ['logOut']),
    logout() {
      this.logOut();
    }
  }
};
</script>

<style lang="less">
@import './HeaderAvatar.less';
</style>
